Angular Featured Modules

Modules in angular are used to group components, directives, pipes and services based on their functionality. When the application grows its always necessary to group and form module to keep the app organized. Feature modules are used for the purpose of organizing the code together.

Create a new angular application

Let's see it with an example. Create a new application with the command.

ng new featured-module

Create a new Module

Once the application is created, let's create a module named EmployeeModule with a routing file.

ng g m employee --routing=true

Create a Component in EmployeeModule

Let's create a component and import it into EmployeeModule. Enter the below command to do the import automatically.

ng g c employee/employee-add

Now if we open the employee.module.ts file it looks as below.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { EmployeeRoutingModule } from './employee-routing.module';
import { EmployeeAddComponent } from './employee-add/employee-add.component';


@NgModule({
  declarations: [EmployeeAddComponent],
  imports: [
    CommonModule
  ]
})
export class EmployeeModule { }

It has automatically imported the EmployeeAddComponent to its declarations. Now open the employee-add.component.html and add the following code.

<p>Employee Add component loaded successfully!</p>

Registering multiple components in EmployeeModule

Similarly, we can create multiple components that perform an operation related to the employee and add then to the declarations array of EmployeeModule. Once it's done we can add the EmployeeModule to the AppModule to perform routing to the component.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { EmployeeModule } from './employee/employee.module';
import { HomeComponent } from './home/home.component';
import { WelcomeComponent } from './welcome/welcome.component';

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    WelcomeComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule,
    EmployeeModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Here we have HomeComponent and WelcomeComponent in declarations array. Create these two components using the following commands.

ng g c home
ng g c welcome

Once the HomeComponent and WelcomeComponent is created. Add a variable title and provide some title to it.

Open the template file of the above two components and modify the code as below.

<p>Welcome to {{title}}</p>

Setup route for the components

Now open the app-routing.module.ts file and modify the code as below.

import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { WelcomeComponent } from './welcome/welcome.component';
import { HomeComponent } from './home/home.component';
import { EmployeeAddComponent } from './employee/employee-add/employee-add.component';


const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'welcome', component: WelcomeComponent },
  { path: 'home', component: HomeComponent },
  { path: 'employee-add', component: EmployeeAddComponent },
  { path: '**', redirectTo: '/home' }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

I have added routes to EmployeeAddComponent with path employee-add.

Add route to the components in app.component.html

Open the app.component.html and modify the code as below.

<h1>Readers Buddy - Angular Featured Module tutorial</h1>
<p>
  <a [routerLink]="['/home']">Home</a> 
  <a [routerLink]="['/welcome']">Greet</a> 
  <a [routerLink]="['/employee-add']">Add Employee</a> 
</p>
<router-outlet></router-outlet>

Exporting component for using in other modules

Suppose if we need to use the EmployeeAddComponent as a selector string in any of the components in AppModule then we need to export the component in EmployeeModule.

Open the EmployeeModule and modify the caode as below.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';

import { EmployeeRoutingModule } from './employee-routing.module';
import { EmployeeAddComponent } from './employee-add/employee-add.component';


@NgModule({
  declarations: [EmployeeAddComponent],
  imports: [
    CommonModule
  ],
  exports:[EmployeeAddComponent]
})
export class EmployeeModule { }

Now we can refer the EmployeeAddComponent in any component's declared in AppModule, since the EmployeeModule is imported in the import's array of AppModule.